'use strict'
require('./index.css')
var _mm = require('util/mm.js')
var templatePagination = require('./index.string')

//这里要写一个构造函数
    var Pagination = function(){
        var _this = this;
        this.defaultOption = {
            container       : null, //放分页的容器
            pageNum         : 1,
            pageRange       : 3,  //前三后三
            onSelectPage    : null
        }
        // 点击事件的处理
        $(document).on('click','.pg-item',function(){
            var $this = $(this);
            //对于active和disabled 按钮点击不做处理
            if($this.hasClass('active') || $this.hasClass('disabled')){
                return
            }
            typeof _this.option.onSelectPage === 'function'
                ? _this.option.onSelectPage($this.data('value'))
                : null;
        })
    };

    //渲染分页组件
    Pagination.prototype.render = function(userOption){
        // 合并选项
        this.option = $.extend({},this.defaultOption,userOption)
        // 判断容器是否为合法的jquery对象
        if(!(this.option.container) instanceof jQuery){
            return 
        }
        // 判断页码数是否只有一页
        if(this.option.pages <= 1){
            return 
        }
        // 可以开始渲染分页了 把分页放到容器中
        this.option.container.html(this.getPaginationHtml())
    };


    // 获取分页的html
    Pagination.prototype.getPaginationHtml = function(){
        var html      = '',
            option    = this.option,
            pageArray = [],
            //开始的页码数 当前页-3 
            start     = option.pageNum - option.pageRange > 0 
                    ? option.pageNum - option.pageRange : 1,
            end       = option.pageNum + option.pageRange <option.pages
                    ? option.pageNum + option.pageRange : option.pages ;
            pageArray.push({
                name     : '上一页',
                value    : option.prePage,
                //这是一个布尔值 disabled 是决定上一页是否可以点击 
                // hasPreviousPage 有一个前面的值 true -->disabled就为false 可以点击
                disabled : !option.hasPreviousPage   
            });
            // |上一页| 2 3 4 =5= 6 7 8|下一页|  5/9  前三后三

            // 数字按钮的处理
            for(var i=start ;i<=end ;i ++){
                pageArray.push({
                    name   : i,
                    value  : i,
                    active : (i === option.pageNum)
                })
            }
            // 下一页按钮的数据
            pageArray.push({
                name  : '下一页',
                value : option.nextPage,
                disabled : !option.hasNextPage
            })

            html = _mm.renderHtml(templatePagination,{
                pageArray : pageArray,
                pageNum   : option.pageNum,
                pages     : option.pages
            });

            return html ;
    };

module.exports = Pagination;
